<!DOCTYPE html>
<html>
<head>
	<title>jquery_table</title>
	<meta charset="utf-8">
</head>
<link type="text/css" href="CSS/css1.css" rel="stylesheet">
	
<body>
    <table border="1">
    	  <thead>
		           <tr>
		    	        <th colspan="5" style="background: rgb(22, 186, 186); color: #fff;">表格</th>
		           </tr>
          
          
			    	<tr style="background: #ccc;">
			    		<th>序号</th>
			    		<th>商品</th>
			    		<th>单价</th>
			    		<th>数量</th>
			    		<th>操作</th>

			    	</tr>
        </thead>
           <tbody>
			    	<tr>
			    		<td>1</td>
			    		<td>樱桃</td>
			    		<td>5.5</td>
			    		<td>3</td>
                
			    		<td>
			    			<button onclick="belRow(this)" class="delbtn">删除</button>
			    			<button class="addbtn">添加</button>
			    		</td>
			    		

			    	</tr>
	
		    	<tr>
			    		<td>2</td>
			    		<td>小丸子</td>
			    		<td>6.5</td>
			    		<td>4</td>
              
			    		<td>
			    			<button class="delbtn" onclick="belRow(this)">删除</button>
			    			<button class="addbtn">添加</button>
			    		</td>
                        
			    	</tr>

			    	<tr>
			    		<td>3</td>
			    		<td>小龙虾</td>
			    		<td>34.5</td>
			    		<td>1</td>
              
			    		<td>
			    			<button class="delbtn" onclick="belRow(this)">删除</button>
			    			<button class="addbtn">添加</button>
			    		</td>

			    	</tr>

			    	<tr>
			    		<td>4</td>
			    		<td>牛扒</td>
			    		<td>55.5</td>
			    		<td>2</td>
              
			    		<td>
			    			<button class="delbtn" onclick="belRow(this)">删除</button>
			    			<button class="addbtn" >添加</button>
			    		</td>
                        
			    	</tr>
                    <tr>
			    	       <th colspan="5">
			    	           <p>商品总计: <span id="sum" style="color: red;"></span></p>
			    	        </th>
			    	</tr>
			    </tbody>
    </table>


    <div class="shade" style="display: none;">
    	<div class="form-pannel">
    		<h5 class="form-hr">请输入表单信息</h5>
    		<div class="form-inner">
    			<input type="text" name="trade" placeholder="请输入商品名称"><br>
    			<input type="text" name="price" placeholder="请输入商品单价"><br>
    			<input type="text" name="quantity" placeholder="请输入商品数量"><br>
    			<div class="ops">
    				<button class="confirm">确定</button>
    				<button class="cancel">取消</button>
    			</div>
    		<div class="off">
    			
    		</div>
            
    		</div>
    		
    	</div>
    </div>





    <script type="text/javascript" src="JS/jquery3.JS"></script>

    <script type="text/javascript">

     var calSum=function(){
      var sum=0;
      $('tbody tr').each(function(){
        var price= $(this).find('td:eq(2)').text();
        var quantity= $(this).find('td:eq(3)').text();
        var total=price*quantity;
        sum +=total; 


      });
      $('#sum').text(sum);
     };
     calSum();

    	$('tbody tr:odd').addClass('even');

      $('.off').click(function(){
      	$('.shade').hide();
      	$('.input[name=trade]').val('');
      	$('.input[name=price]').val('');
      	$('.input[name=quantity]').val('');

     });
       
       // 表格行中的添加事件
      $('.addbtn').click(function(){
      	$('.shade').show();
      });

       var showFrom =function(){
       	$('.shade').show();
       }

     function belRow(aa){
	    $(aa).parent().parent().remove();
        
        // 调整奇偶样式
        $('tbody tr').removeClass();
        $('tbody tr:odd').addClass('odd');
        
        // 调整删除后序号
        for(var i=0;i<$('tbody tr').length;i++){
        	$('tbody tr:eq(' +i+')').find('td:first').text(i+1);
        }
    
       calSum();
     } 

     
      // 弹出框中的确定
      $('.confirm').click(function(){
      	$('.shade').hide();
      	// 先获取tbody中的行数
      	var ntr = $('tbody tr').length;
      	var sn = $('tbody tr:eq(' +(ntr-2)+')').find('td:first').text();

      	var name = $('input[name=trade]').val();
      	var price = $('input[name=price]').val();	
      	var quantity = $('input[name=quantity]').val();

      	var tr = '<tr><td>'+(parseInt(sn)+1)+'</td><td>'+name+'</td><td>'+price+'</td><td>'+quantity+'</td><td><button onclick="belRow(this)">删除</button>  <button onclick="showFrom()">添加</button></td></tr>';

            $('tbody tr:eq('+(ntr-2)+')').after(tr);

            /**隐藏表单的输入层*/
    $('.shade').hide();

    calSum();
      })

     // 弹出框中的取消
      $('.cancel').click(function(){
      	$('.shade').hide();
      });






    </script>
    
</body>
</html>